<template>
         <div id="box">
               <header>
                     <img class="fh" :src="fh" alt="" @click="back">
                     <span class="title">登录</span>
               </header>
               <div class="kbb">
                     <img class="kbbtp" :src="kbb" alt="">
               </div>
               <nav>
                     <input class="name" :style="sj" type="number" v-model="phone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" />
                     <input class="name psd" type="password" v-model="pasd" :style="mm" placeholder="请输入6-16位密码" oninput="if(value.length>16)value=value.slice(0,16)" />
                     <button @click="dl" >登录</button>
               </nav>
               <div class="bottom">
                        <router-link tag="span" :to="{name:'register'}" class="new">新用户注册</router-link>
                        <router-link tag="span" :to="{name:'forgetpawd'}" class="wjmm">忘记密码？</router-link>
               </div>
         </div>
</template>

<script>
import fh from "@/assets/img/fh_02.jpg"
import kbb from "@/assets/img/headimg.jpg"
import $ from 'jquery'
import { userInfo } from 'os';

export default {
        data(){
              return{
                    fh,
                    kbb,
                    phone:'',
                    pasd:'',
                  sj:{
                    backgroundImage: "url(" + require("../assets/img/ip_06.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.66rem 0.96rem",
                    backgroundPosition:"left 0.6rem top 0.52rem",
                },
                  mm:{
                    backgroundImage: "url(" + require("../assets/img/ip_10.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.68rem 0.78rem",
                    backgroundPosition:"left 0.6rem top 0.68rem",
                }, 
              }
        },
        methods:{
              back(){
               this.$router.push({name:'home'})
           },
              dl(){
                    if(!this.phone) return mui.toast("手机号未填");
                    if(!/^1[123456789]\d{9}$/.test(this.phone)) return mui.toast('手机号格式不对');
                    if(!this.pasd) return mui.toast("请输入密码")
                    var qs = require('qs')
                    this.$http.post("/api/login/login",qs.stringify({'phone':this.phone,'password':this.pasd}))
                        .then(res=>{
                              if(res.data.code=="200"){
                                    mui.toast("登录成功")
                                    this.$router.push({name:'home'})
                                    localStorage.setItem('Token',res.data.data.Token)
                                    var obj = {"phone":this.phone,"Token":res.data.data.Token}
                                    localStorage.setItem("userInfo",JSON.stringify(obj))
                              }
                              if(res.data.code=="503"){
                                    mui.toast("用户不存在,请重新输入或去注册")
                              }
                              if(res.data.code=="504"){
                                    mui.toast("登录密码错误")
                              }
                        })
              }
        },
        mounted(){
          
        }
}
</script>

<style lang="less" scoped>
         #box{
               width:100%;
               height:100%;
               background:#fff;
         }
         header{
               width:100%;
               height:1.88rem;
               background:#fff;
               display:flex;
         }
         .fh{
             width:1.55rem;
             height:1.29rem;  
             z-index:100; 
         }
         .title{
              font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
                position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .kbb{
               width:100%;
               height:6.4rem;
               background:#fff;
         }
         .kbbtp{
             width:4.5rem;
             height:4.5rem;
             position:relative;
             left:0;
             right:0;
             top:15%;
             margin:0 auto;
         }
         nav{
               width:100%;
               height:8.34rem;
               background:#fff;
               position:relative;
               display:flex;
               flex-direction:column;
         }
         input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
                  /* WebKit browsers */ 
                  color: #c0c0c0; 
                  } 
                  input:-moz-placeholder, textarea:-moz-placeholder { 
                  /* Mozilla Firefox 4 to 18 */ 
                  color: #c0c0c0; 
                  } 
                  input::-moz-placeholder, textarea::-moz-placeholder { 
                  /* Mozilla Firefox 19+ */ 
                  color: #c0c0c0; 
                  } 
                  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
                  /* Internet Explorer 10+ */ 
                  color: #c0c0c0; 
                  } 
         .name{
               border:none;
               width:90%;
               height:2.16rem;
               left:0;
               right:0;
               margin-bottom:0.6rem;
               margin:0 auto;
               border-radius:0.18rem;
               margin-bottom:0.6rem;
               background:#f3f3f3;
               padding-left:1.8rem;
               color:#c0c0c0;
         }
         .psd{
               margin-bottom:1.52rem;
         }
         button{
         	 border:none;
               width:80%;
               height:1.8rem;
               left:0;
               right:0;
               margin:0 auto;
               border-radius:0.16rem;
               font-size:0.6rem;
               color:#fff;
               letter-spacing:0.1rem;
            background: #0dafe6; /* Old browsers */
            background: -moz-linear-gradient(left, #0dafe6 0%, #2989d8 51%, #207cca 100%, #1c89fe 100%, #207cca 101%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #0dafe6 0%,#2989d8 51%,#207cca 100%,#1c89fe 100%,#207cca 101%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #0dafe6 0%,#2989d8 51%,#207cca 100%,#1c89fe 100%,#207cca 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dafe6', endColorstr='#207cca',GradientType=1 ); /* IE6-9 */
                  }
          .bottom{
                width:100%;
                height:1.94rem;
                background:#fff;
                line-height:1.94rem;
                color:#1b88fd;
                font-size:0.48rem;
                display:flex;
                justify-content:space-between;
                padding-left:10%;
                padding-right:10%;
          }        
</style>

